<%@ page contentType="text/html; charset=utf-8"%>
<%-- 页面声明：设置响应内容类型为HTML，字符编码为UTF-8，确保中文正常显示 --%>
<html>
<head>
   <title>注册页面</title>
   <% 
     // 动态获取应用上下文路径，用于拼接图片的完整路径（适配不同部署环境）
     String contextPath = request.getContextPath().trim();
     // 提交按钮图片路径（保存按钮）
     String tempSavePath = contextPath + "/images/systemImages/save.jpg"; 
     // 重置按钮图片路径
     String tempClearPath = contextPath + "/images/systemImages/clear.gif"; 
     // 返回按钮图片路径（当前页面未使用，保留以备扩展）
     String tempBackPath = contextPath + "/images/systemImages/back.gif"; 
   %>
</head>
<body>
    <%-- 外层主表格：控制整体页面宽度（1024px）和居中显示 --%>
    <table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
    
        <tr>
            <%-- 主内容区域：宽度724px，居中对齐，背景色白色 --%>
            <td width="724" align="center" valign="top" bgcolor="#FFFFFF">
                <%-- 内层表格：用于组织注册表单内容，占满父容器宽度 --%>
                <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td bgcolor="#FFFFFF" align="center">
                            <%-- 页面标题：提示用户当前为注册信息录入页面 --%>
                            <p><strong>用户注册信息录入</strong></p>
                            
                            <%-- 注册表单：
                                 - name="userForm"：表单名称，用于JS引用（如重置功能）
                                 - action：表单提交的目标处理页面（user.jsp?action=0表示注册操作）
                                 - method="post"：提交方式为POST，数据在请求体中传输，更安全 --%>
                            <form name="userForm" action="<%=request.getContextPath()%>/pages/customer/user.jsp?action=0" method="post">
                                <%-- 表单内容表格：宽度400px，居中显示（margin: 0 auto），无边框和间距 --%>
                                <table width="400" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto;">
                                  <%-- 用户名输入行 --%>
                                  <tr>
                                      <%-- 左侧标签列：宽度120px，右对齐，行高35px --%>
                                      <td width="120" height="35"><div align="right">用户名称：</div></td>
                                      <%-- 右侧输入列：文本输入框，name="userName"用于后端获取值，placeholder提示输入内容 --%>
                                      <td><div align="left"><input type="text" name="userName" placeholder="请输入用户名"></div></td>
                                  </tr>
                                  <%-- 密码输入行 --%>
                                  <tr>
                                      <td height="35"><div align="right">用户密码：</div></td>
                                      <%-- type="password"：输入内容显示为掩码（如•），保护密码安全 --%>
                                      <td><div align="left"><input type="password" name="password" placeholder="请输入密码"></div></td>
                                  </tr>
                                  <%-- 真实姓名输入行 --%>
                                  <tr>
                                      <td height="35"><div align="right">真实姓名：</div></td>
                                      <td><div align="left"><input type="text" name="realName" placeholder="请输入真实姓名"></div></td>
                                  </tr>
                                  <%-- 手机号码输入行 --%>
                                  <tr>
                                      <td height="35"><div align="right">用户手机：</div></td>
                                      <td><div align="left"><input type="text" name="mobile" placeholder="请输入手机号"></div></td>
                                  </tr>
                                  <%-- 邮箱地址输入行 --%>
                                  <tr>
                                      <td height="35"><div align="right">电邮地址：</div></td>
                                      <td><div align="left"><input type="text" name="email" placeholder="请输入邮箱"></div></td>
                                  </tr>
                                  <%-- 密码提示问题输入行（用于密码找回） --%>
                                  <tr>
                                      <td height="35"><div align="right">密码提示：</div></td>
                                      <td><div align="left"><input type="text" name="passwordQuestion" ></div></td>
                                  </tr>
                                  <%-- 密码提示答案输入行（用于验证密码找回权限） --%>
                                  <tr>
                                      <td height="35"><div align="right">密码答案：</div></td>
                                      <td><div align="left"><input type="text" name="passwordHintAnswer" ></div></td>
                                  </tr>
                                </table>                                  
                                <br> <%-- 换行，增加表单与按钮的间距 --%>
                                
                                <%-- 提交按钮：
                                     - type="image"：以图片作为提交按钮，点击后触发表单提交
                                     - src：按钮图片路径，宽80px，高30px --%>
                                <input type="image" class="input1" src="<%=tempSavePath %>" width="80" height="30" value="提交注册">
                                
                                <%-- 重置按钮：
                                     - 点击后调用userForm.reset()，清空所有输入框内容
                                     - 图片路径为重置按钮图片，宽80px，高30px --%>
                                <a href="#" onClick="userForm.reset()"><img src="<%=tempClearPath %>" width="80" height="30" alt="重置"></a>
                            </form>
                        </td>
                    </tr>
                    <%-- 页脚导航栏：引入公共的状态栏导航组件（如版权信息、导航链接等） --%>
                    <tr>
                        <td colspan="2"> <%@ include file="/pages/common/statusBarNavigation.jsp" %> </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

